<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<title>角色权限查看</title>
<script type="text/javascript">
	var $userGrid;
	var $roleTree;
	var $dataRoleTree;
	var selectUserRow;
	$(function() {
		$userGrid = $("#userGrid").datagrid($.extend(datagridOption, {
			url : "${ctx}/basic/userPermission/userDataGrid",
			columns : [ [ {
				field : 'ck',
				checkbox : true
			}, {
				field : 'loginNo',
				title : '登录账号',
				width : 100,
				sortable : true
			}, {
				field : 'trueName',
				title : '姓名',
				width : 100,
				sortable : true
			} ] ],
			onClickRow : function(rowIndex, rowData) {
				$.easyui.loading({ msg: "正在加载..."});
				selectUserRow = rowData;
				fn_refreshTree();
			}
		}));
		$userGrid.datagrid('enableFilter');
		$roleTree = $("#roleTree").tree({
			method : "get",
			lines : true,
			//url : "${ctx}/basic/userPermission/roleTree/",
			dataPlain : true, //该属性用以启用当前 easyui-tree 控件对平滑数据格式的支持
			toggleOnClick : false,
		});
		$dataRoleTree = $("#dataRoleTree").tree({
			method : "get",
			lines : true,
			//url : "${ctx}/basic/userPermission/roleTree/",
			dataPlain : true, //该属性用以启用当前 easyui-tree 控件对平滑数据格式的支持
			toggleOnClick : false,
		});
		$("#showView").click(function() {
			var rowData = $userGrid.datagrid("getSelected");
			$("#dlg").dialog("open").dialog("setTitle", "查看图形");
			var option = "";
			require.config({
				paths : {
					echarts : '${ctx}/static/js/echarts-2.2.0/build/dist'
				}
			});
			require([ 'echarts', 'echarts/chart/force', 'echarts/chart/chord' ], function(ec) {
				var myChart = ec.init(document.getElementById('main'));
				$.get("${ctx}/basic/userPermission/graphicalUserPermission/" + rowData.id, function(param) {
					option = param.obj;
					myChart.setOption(option);
				}, "json");
			});
		});
	});
	function fn_refreshTree() {
		if (!selectUserRow) {
			$.messager.show({
				msg : "请先选择用户！",
				icon : "warning",
				position : "bottomRight"
			});
			return false;
		}
		//$roleTree.tree({url:"${ctx}/basic/userPermission/roleTree/" + selectUserRow.id});
		//$dataRoleTree.tree({url:"${ctx}/basic/userPermission/dataRoleTree/" + selectUserRow.id});
		$.get("${ctx}/basic/userPermission/dataRoleTree/" + selectUserRow.id, function(result) {
			if (result.success && result.obj) {
				$dataRoleTree.tree({
					data : result.obj
				});
			} else {
				$dataRoleTree.tree({
					data : []
				});
				$.messager.show({
					msg : result.msg,
					icon : "info",
					position : "bottomRight"
				});
			}
		}, 'json');
		$.get("${ctx}/basic/userPermission/roleTree/" + selectUserRow.id, function(result) {
			if (result.success && result.obj) {
				$roleTree.tree({
					data : result.obj,
					onLoadSuccess:function(){
						$.easyui.loaded();
					}
				});
			} else {
				$roleTree.tree({
					data : []
				});
				$.messager.show({
					msg : result.msg,
					icon : "info",
					position : "bottomCenter"
				});
				$.easyui.loaded();
			}
		}, 'json');
	}
</script>
</head>

<body class="easyui-layout" data-options="fit:true,border:false">

	<div data-options="region:'center'" data-options="fit:true" style="padding: 1px;">
		<div id="tt" class="row">
			<div class="col-md-12">
			<button id="showView" type="button" class="btn btn-primary">
					<span class="glyphicon glyphicon-eye-open"></span> 查看图形
				</button>
			</div>
		</div>
		<div id="cc" class="easyui-layout" data-options="fit:true" style="width: 350px; height: 480px;">
			<div data-options="region:'west', split: true, collapsible:true" style="padding: 1px; witdh: 300px">
				<table id="userGrid">
				</table>
			</div>
			<div data-options="region:'center', split: true,title:'角色权限', collapsible:true" style="padding: 1px; witdh: 300px">
				<table id="roleTree">
				</table>

			</div>
			<div data-options="region:'east',  split: true,title:'数据角色权限', collapsible:true" style="padding: 1px; witdh: 300px">
				<table id="dataRoleTree">
				</table>
			</div>
		</div>
		<div id="dlg" class="easyui-dialog" style="width: 800px; height: 600px; padding: 10px 20px" data-options="closed:true">
			<div id="main" style="height: 500px"></div>
		</div>
	</div>
</body>
</html>
